<template>
    <div class="container">
        <div class="box">
            <!-- 使用 a-row 布局行 -->
            <a-row>
                <!-- 左栏，菜单部分，占 6 列，ant-design-vue 默认 24 列 -->
                <a-col :span="3">
                    <a-menu
                        style="width: 128px;height: 800px;"
                        :default-selected-keys="['1']"
                        :open-keys.sync="openKeys"
                        mode="inline"
                        @click="handleClick"
                    >
                        <a-menu-item-group>
                            <a-menu-item key="1">
                                我的主页
                            </a-menu-item>
                            <a-menu-item key="2">
                                我的课程
                            </a-menu-item>
                            <a-menu-item key="3">
                                我的订单
                            </a-menu-item>
                            <a-menu-item key="4">
                                我的会员
                            </a-menu-item>
                        </a-menu-item-group>
                    </a-menu>
                </a-col>
                <!-- 右栏，添加内容部分，占 18 列 -->
                <a-col :span="21">
                    <!-- 根据 activeMenuKey 切换显示内容 -->
                    <div class="right-content" v-if="activeMenuKey === '1'">
                        <h2>个人信息</h2>
                        <div class="myInformation">
                            <!-- 昵称 -->
                            <div class="informationList">
                                <div class="informationTitle">
                                    昵称
                                    <span class="informationTitleRight">
                                        <span type="primary" @click="showModal" style="cursor: pointer;">
                                            修改
                                            <a-icon type="edit" />
                                        </span>
                                        <a-modal
                                        title="昵称设置"
                                        :visible="visible"
                                        :confirm-loading="confirmLoading"
                                        @ok="handleOk"
                                        @cancel="handleCancel"
                                        >
                                            <p><input type="text" placeholder="请输入新昵称" v-model="newNickname"></p>
                                        </a-modal>
                                    </span>
                                </div>
                                <div class="informationContent">
                                    {{ $store.state.userInfo.nickname }}
                                </div>
                            </div>
                            <!-- 手机号 -->
                            <div class="informationList">
                                <div class="informationTitle">
                                    手机号
                                    <!-- <span class="informationTitleRight">
                                        <span type="primary" @click="showModal">
                                            修改
                                            <a-icon type="edit" />
                                        </span>
                                        <a-modal
                                        title="Title"
                                        :visible="visible"
                                        :confirm-loading="confirmLoading"
                                        @ok="handleOk"
                                        @cancel="handleCancel"
                                        >
                                        <p>{{ ModalText }}</p>
                                        </a-modal>
                                    </span> -->
                                </div>
                                <div class="informationContent">
                                    {{ $store.state.userInfo.mobile }}
                                </div>
                            </div>
                            <!-- 密码 -->
                            <div class="informationList">
                                <div class="informationTitle">
                                    密码
                                    <!-- <span class="informationTitleRight">
                                        <span type="primary" @click="showModal">
                                            修改
                                            <a-icon type="edit" />
                                        </span>
                                        <a-modal
                                        title="Title"
                                        :visible="visible"
                                        :confirm-loading="confirmLoading"
                                        @ok="handleOk"
                                        @cancel="handleCancel"
                                        >
                                        <p>{{ ModalText }}</p>
                                        </a-modal>
                                    </span> -->
                                </div>
                                <div class="informationContent">
                                    ******
                                </div>
                            </div>
                            <!-- 头像 -->
                            <div>
                                <div class="informationContent">
                                    <img :src="$store.state.userInfo.avatarUrl" v-if="isShow">
                                    <img src="../../../assets/用户暂未上传.png" alt="" v-else>
                                </div>
                                <div class="informationTitle">
                                    <a-upload
                                        name="file"
                                        :multiple="true"
                                        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                                        :headers="headers"
                                        @change="handleChange"
                                    >
                                        <a-button> <a-icon type="upload" /> 上传头像 </a-button>
                                    </a-upload>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="right-content" v-if="activeMenuKey === '2'">
                        <div>
                            <a-tabs default-active-key="1" @change="callback">
                            <a-tab-pane key="1" tab="正在学习">
                                <a-empty :description="false" />
                                <p style="text-align: center;">暂无数据</p>
                            </a-tab-pane>
                            <a-tab-pane key="2" tab="我的收藏" force-render>
                                <a-empty :description="false" />
                                <p style="text-align: center;">暂无数据</p>
                            </a-tab-pane>
                            <a-tab-pane key="3" tab="我的报名">
                                <a-empty :description="false" />
                                <p style="text-align: center;">暂无数据</p>
                            </a-tab-pane>
                            <a-tab-pane key="4" tab="观看记录">
                                <a-empty :description="false" />
                                <p style="text-align: center;">暂无数据</p>
                            </a-tab-pane>
                            </a-tabs>
                        </div>
                    </div>
                    <div class="right-content" v-if="activeMenuKey === '3'">
                        <div>
                            <a-tabs default-active-key="2" @change="callback">
                            <a-tab-pane key="1" tab="我的订单">
                                <a-empty :description="false" />
                                <p style="text-align: center;">暂无数据</p>
                            </a-tab-pane>
                            <a-tab-pane key="2" tab="等待付款" force-render>
                                <a-empty :description="false" />
                                <p style="text-align: center;">暂无数据</p>
                            </a-tab-pane>
                            <a-tab-pane key="3" tab="付款成功">
                                <a-empty :description="false" />
                                <p style="text-align: center;">暂无数据</p>
                            </a-tab-pane>
                            </a-tabs>
                        </div>
                    </div>
                    <div class="right-content" v-if="activeMenuKey === '4'">
                        <h2>我的会员</h2>
                        <p>这里是你的会员权益信息。</p>
                    </div>
                </a-col>
            </a-row>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            openKeys: ['1'],
            // 新增状态，记录当前选中菜单项的 key
            activeMenuKey: '1',
            isShow: false,
            headers: {
                authorization: 'authorization-text',
            },
            visible: false,
            confirmLoading: false,
            newNickname: '', // 用于存储新的昵称
        };
    },
    watch: {
    },
    created() {
        if (this.$store.state.userInfo.avatarUrl) {
            this.isShow = true; 
        }else {
            this.isShow = false; 
        }
    },
    methods: {
        callback(key) {
            console.log(key);
        },
        handleClick(e) {
            // 更新当前选中菜单项的 key
            this.activeMenuKey = e.key;
            console.log('click', e);
        },
        titleClick(e) {
            console.log('titleClick', e);
        },
        handleChange(info) {
            if (info.file.status !== 'uploading') {
                console.log(info.file, info.fileList);
            }
            if (info.file.status === 'done') {
                this.$message.success(`${info.file.name} file uploaded successfully`);
            } else if (info.file.status === 'error') {
                this.$message.error(`${info.file.name} file upload failed.`);
            }
        },
        showModal() {
            this.visible = true;
        },
        handleOk() {
            this.confirmLoading = true;
            if(this.newNickname){
                const newUserInfo = {
                    ...this.$store.state.userInfo,
                    nickname: this.newNickname
                };
                this.$store.commit('setUserInfo', newUserInfo);
            }
            setTimeout(() => {
                this.visible = false;
                this.confirmLoading = false;
            }, 2000);
        },
        handleCancel() {
            this.visible = false;
            this.newNickname = ''; 
        },
    },
};
</script>
<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.container {
    background: #f4f4f4;
}
.box {
    width: 1160px;
    margin: auto;
    margin-top: 15px;
    background: #fff;
    border-radius: 10px;
    margin-bottom: 15px;
    padding: 20px;
}
.right-content {
    padding: 20px;
    color: rgba(0, 0, 0, .65);
    font-size: 14px;
    .myInformation {
        padding: 40px;
        font-size: 20px;
        color: #333;
        line-height: 40px; 
        .informationTitleRight {
            font-size: 14px;
            color: #00cf8c;
        }
        .informationList {
            padding-bottom: 20px;
            margin-bottom: 20px;
            border-bottom: 1px solid #ddd;
        }
        img {
            width: 200px;
            height: 200px;
        }
    }
    .onload {
        width: 100px;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        text-align: center;
        margin-top: 10px;
        background-color: #fff;
        border: 1px solid #ddd;
        &:hover {
            border: 1px solid #00cf8c;
            color: #00cf8c;
        }
    }
}
input {
    width: 100%;
    height: 50px;
    border: none;
    border: 1px solid #ddd;
    background-color: #f4f4f4;
    border-radius: 8px;
}
::v-deep .ant-modal-header,
::v-deep .ant-modal-footer {
    text-align: center!important;
    border: none!important;
}
</style>